<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta charset="utf-8">
  <title>用户管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <link rel="icon" type="image/png" th:href="@{/static/image/icon.ico}"/>
  <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
</head>
<body>
<div class="layui-layout layui-layout-admin">
	<div th:include="common/menu.html"></div>
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
    	<blockquote class="layui-elem-quote">
		用户管理
		</blockquote>
		<script type="text/html" id="addRole">
  			<a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="detail" ><i class="layui-icon layui-icon-addition">添加</i></a>
		</script>
    	<table class="layui-hide" id="table_id" lay-filter="table_lay"></table>
    	
    	<shiro:hasPermission  name="sysUser:view">
    	<script type="text/html" id="userStatus">
			  <input type="checkbox" name="status" id="status"  value="{{d.id}}" title="激活" lay-filter="lockDemo" {{d.status == 1 ? 'checked' : '' }}>
		</script>
		</shiro:hasPermission >
		<script type="text/html" id="userRole">
			{{#  if(d.sysRole ==null){ }}
  			  <button type="button" class="layui-btn layui-btn-sm">关联角色</button>
 			 {{#  } else { }}
    			{{d.sysRole.roleName}}
 			 {{#  } }}
		</script>
    	<script type="text/html" id="barDemo">
           <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
           <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
    </div>
  </div>
</div> 
<script th:src="@{/static/js/jquery-2.1.4.min.js}"></script>
<script th:src="@{/static/layui/layui.js}"></script>
<script th:src="@{/static/layui/lay/modules/table.js}"></script>
<script>
layui.config({
    base : '../static/layui/'
}).extend({
    treetable : 'treetable-lay/treetable'
}).use(['table', 'layer','element','form'], function () {
    var table = layui.table;
    var layer = layui.layer;
    var form = layui.form;
    var element = layui.element //元素操作
    var $ = layui.jquery;
    //渲染表格
     table.render({
         elem: '#table_id'
         ,height: 420
         ,url: '/user/sysUser/list.html' //数据接口
         ,title: '角色'
         //,toolbar: '#addRole' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
         ,cols: [ 
         	[
         		 {type: 'numbers', title: '编号'}
                 ,{field: 'username', title: '用户名称' }
                 ,{field: 'headPortrait', title: '用户头像',templet:'<div><img  style="height:30px;width:30px" src="{{d.headPortrait}}"></div>'}
                 ,{field: 'email', title: '邮箱', sort: true, totalRow: true}
                 ,{field: 'status', title: '激活状态', templet: '#userStatus', unresize: true, sort: true}
                 ,{field: 'sysRole', title: '关联角色',templet: '#userRole',event:'roleRelation', sort: true, totalRow: true}
                 ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
       		  ] 
         	],
       }); 
      //监听头工具栏事件
      table.on('toolbar', function(obj){
		editTable("");
	  });
      //监听行工具事件
      table.on('tool(table_lay)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
        ,layEvent = obj.event; //获得 lay-event 对应的值
        if(layEvent === 'detail'){
          layer.msg('查看操作');
        } else if(layEvent === 'del'){
          layer.confirm('确认删除吗？', function(index){
             layer.close(index);
        	  //向服务端发送删除指令
        	 $.post("/user/sysUser/delete/{id}.html",{id:data.id},function(result){
        		 if(result.code==200){
		  			  obj.del();//删除对应行（tr）的DOM结构
		  		  }
        		 layer.msg(result.message, {icon: result.icon});
        	 });
          });
        } else if(layEvent === 'edit'){
        	editTable(data.id);
        }else if(layEvent === 'roleRelation'){
          //弹出关联
          editTable(data.id);
        }
      });
      
		function editTable(data){
			layer.open({
	    	      type: 2,
	    	      title: '',
	    	      maxmin: true,
	    	      shadeClose: true, //点击遮罩关闭层
	    	      area : ['470px' , '400px'],
	    	      content: '/user/sysUser/getSysRole.html?id='+data  //加上选中行的ID值
	    	 }); 
		}
     //监听锁定操作
      form.on('checkbox(lockDemo)', function(obj){
    	  var status;
    	  var userId=obj.elem.value;
    	  var checked=obj.elem.checked;
    	  if(checked==false){
    		  status=0;
    	  }else{
    		  status=1;
    	  }
          //更改用户激活状态
   	      $.post("/user/sysUser/activationUser.html",{status:status,userId:userId},function(result){
  			    layer.msg(result.message, {icon: result.icon});
   		  });  
         })
      });
</script>
</body>
</html>